<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <form action="">
        <div>
            <input type=" text" name="username"  placeholder="请输入用户名">
            
        <div>
            <input type="password"  name ="mima " placeholder="请输入密码">
        </div>
        <div>
            <input type="radio"  name="gender" value="nv" id="nv" checked><label for="nv">女</label>
            <input type="radio" name="gender" value="nan" id="nan"><label for="nan">男</label>
            <input type="radio" name="gender" value="baomi" id="baomi"><label for="baomi">保密</label>
        </div>
        <div>
            <input type="radio"  name="child" value="yes" checked><label for="">未成年</label>
            <input type="radio"  name="child" value="no" ><label for="">成年</label>
        </div>
        <div>
            <input type="checkbox" name="like" value="sport" id="sport" checked><label for="sport" > 运动</label>
            <input type="checkbox" name="like" value="music" id="music"><label for="music"> 音乐</label>
            <input type="checkbox" name="like" value="game" id="game"><label for="game"> 游戏</label>
        </div>
        <div>
            <!--file 类型用于选择文件 由于样式很难以调整 一般很少使用-->
            <input type="file"  name="avatar" placeholder="头像提示"> 
        </div>
        <div>
            <!--hidden 类型 称为隐藏于 用于向后台发送用户不可见的参数-->
            <input type="hidden"  placeholder="输入">
        </div>
        <div>
            <!--可以一键清除-->
            <input type="search" placeholder="搜索">
        </div>
        <div>
            <!--日历选择-->
            <input type="date" placeholder="生日">
            <input type="time" placeholder="生日">
        </div>
        <div>
            <input type="range"><label for="">音量</label>
        </div>
        <div>
            <!--数字输入-->
            <input type="number"><label for="">年龄</label>
        </div>
        <div>
            <!--文本域-->
            <textarea name="" id="" cols="30" rows="10" disabled>这是默认值</textarea>
        </div>
        <div>
            <select  name="" id="" > 
                <optgroup label="山西">
                <option value="jz">晋中</option>
                <option value="ts" selected>大师</option>
                <option value="ly">临沂</option>
                </optgroup>
                <optgroup label="山东">
                   <option value="yc">运城</option> 
                   <option value="sc" selected>武汉</option> 
                </optgroup>
                
            </select>
        </div>
        <div>
            
            <button>注册</button>
        </div>
    </form>
</body>
</html>